<template>
	<view class="page-view">
		<nav-view :defaultShow="true" :title="'个人认证'"></nav-view>
		<view class="page-conte">
			<view class="list-view-box">
				<view class="item-box is-flex">
					<view class="name">名称<text class="icon">*</text></view>
					<input class="input" type="text" v-model="realname" placeholder="请输入姓名" >
				</view>
				<view class="item-box is-flex">
					<view class="name">手机号<text class="icon">*</text></view>
					<input class="input" type="number" v-model="mobile" placeholder="请输入联系手机号" >
				</view>
				<view class="item-box is-flex">
					<view class="name">身份证号码<text class="icon">*</text></view>
					<input class="input" type="text" v-model="idcard" placeholder="请输入身份证号码" >
				</view>
				<view class="item-box item-box1 is-flex">
					<view class="name">身份证照片</view>
					<view class="img-header" @click="chooseImgsCropper">
						<img class="icon" :src="tempImg?tempImg:require('@/static/images/icon-xj.png')" alt="">
					</view>
				</view>
			</view>
			<view class="up-btn u-fixed-b" @click="submit">
				<text>提交</text>
			</view>
		</view>
		<uni-img-cropper ref="gmyImgCropper" :quality="1" cropperType="fixed" :imgSrc="imgSrc" @getImg="getImg">
		</uni-img-cropper>
	</view>
</template>

<script>
	import uniImgCropper from "../component/uni-img-cropper.vue";
	export default {
		components: {
			uniImgCropper
		},
		data(){
			return{
				realname:'',
				mobile:'',
				idcard:'',
				tempImg:'',
				userInfo:{}
			}
		},
		onShow() {
			/*获取个人中心数据*/
			this.getData();
		},
		methods: {
			getData() {
				let self = this;
				self.isloadding = true;
				self._get('user.index/detail', {}, function(res) {
					if (res.data.getPhone) {
						self.gotoPage('/pages/login/login');
						return;
					}
					self.userInfo = res.data.userInfo;
					self.avatarUrl = self.userInfo.avatarUrl;
					self.realname = self.userInfo.nickName;
					self.mobile = self.userInfo.mobile;
					self.idcard = self.userInfo.idcard;
					self.tempImg = self.userInfo.idcard_front;
					self.setting = res.data.setting;
					self.loadding = false;
					uni.stopPullDownRefresh();
					self.isloadding = false;
				});
			},
			touchAddImage(){
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', "camera"], //从相册选择 、使用相机
					success(res) {
						console.log("++res++ " + JSON.stringify(res.tempFilePaths))
						_this.tempImg = res.tempFilePaths[0]
					}
				})
			},
			chooseImgsCropper(type){
				let self = this;
				this.$refs.gmyImgCropper.chooseImage();
			},
			getImg(e) {
				this.uploadFile(e);
			},
			uploadFile: function(filePath) {
				let self = this;
				
				let params = {
					token: uni.getStorageSync('token'),
					app_id: self.getAppId()
				};
				let url = self.websiteUrl + '/index.php?s=/api/file.upload/image';
			
				uni.uploadFile({
					url: url,
					filePath: filePath,
					name: 'iFile',
					formData: params,
					success: function(res) {
						let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
						if (result.code === 1) {
							self.tempImg = result.data.file_path;
						} else {
								uni.showModal({
									title: '提示',
									content: result.msg,
									showCancel:false,
									success: function (res) {
										
									}
								});
							}
					},
					complete: function() {
						
					}
				});
			
			},
			submit(){
				let self = this;
				
				if(self.realname.length > 10 || self.realname.length < 2){
					uni.showModal({
						title: '提示',
						content: '最短2个汉字，最长10个汉字',
					});
					return;
				}
				if(self.mobile == ''){
					uni.showModal({
						title: '提示',
						content: '请输入手机号',
					});
					return;
				}
				if(self.idcard == ''){
					uni.showModal({
						title: '提示',
						content: '请输入身份证',
					});
					return;
				}
				
				
				let params = {
					nickName:self.realname,
					mobile:self.mobile,
					idcard:self.idcard,
					idcard_front:self.tempImg,
					is_auth:1
				};
				
				self._post(
					'user.user/updateUserInfo', params,
					function(res) {
						uni.navigateBack();
					}
				);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-conte {
		padding: 0 40rpx;
	}
	.item-box {
		padding: 40rpx 0;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		border-bottom: 1rpx solid #EDEDED;
	}
	.item-box .name .icon {
		color: #E92525;
		font-style: normal;
		font-size: 32rpx;
	}
	.item-box .input {
		flex: 1;
		text-align: right;
	}
	.item-box1 {
		padding: 20rpx 0;
	}
	.img-header img {
		width: 166rpx;
		height: 166rpx;
	}
	.up-btn {
		position: fixed;
		left: 40rpx;
		right: 40rpx;
		bottom: 80rpx;
	}
	.up-btn text {
		display: block;
		line-height: 80rpx;
		background: #232DA7;
		border-radius: 13rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>